<template>
  <CustomDrawer
    v-model="show"
    ref="drawer"
    class="action-drawer"
    :width="400"
    :title="title"
    @on-close="hideDrawer">
    <Form
      ref="JformData"
      class="form"
      :label-width="80"
      :model="formData"
      :rules="formRules">
      <CustomFormItem prop="username" label="用户名">
        <CustomInput
          v-model="formData.username"
          placeholder="用户名"
          :disabled="isEdit" />
      </CustomFormItem>
      <CustomFormItem prop="mobilephone" label="手机号码">
        <CustomInput
          v-model="formData.mobilephone"
          placeholder="手机号码" />
      </CustomFormItem>
      <CustomFormItem prop="name" label="姓名">
        <CustomInput
        v-model="formData.name"
        placeholder="姓名" />
      </CustomFormItem>
      <CustomFormItem prop="roleid" label="所属角色">
        <CustomSelect
          v-model="formData.roleid"
          placeholder="所属角色"
          :optionList="workOptionList" />
      </CustomFormItem>

      <div class="Buttons">
        <div class="Button-detail">
          <CustomButton
            type="primary"
            :loading="loading"
            @click="actionClick">提交保存</CustomButton>
        </div>
      </div>
    </Form>
  </CustomDrawer>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { rules } from '../js/rules'

export default {
  computed: {
    title ({ type }) {
      return type === 'save' ? '新增用户' : '编辑用户'
    },
    isEdit ({ type }) {
      return type === 'edit'
    },
    ...mapState({
      'type': state => state.user.type,
      'formInfo': state => state.user.formInfo
    })
  },
  created () {
    this.formRules = rules(this)
    this.workOptionList = [
      { label: '系统管理员', value: 1 },
      { label: '教师', value: 2 }
    ]
  },
  data () {
    return {
      formData: {},
      loading: false,
      show: false
    }
  },
  methods: {
    initData () {
      if (this.type === 'edit') {
        this.formData = JSON.parse(JSON.stringify(this.formInfo))
      } else {
        this.initFormData()
      }
    },
    initFormData () {
      this.formData = {}
      this.$refs['JformData'].resetFields()
    },
    showDrawer () {
      this.initData()
      this.show = true
    },
    // 关闭弹窗
    hideDrawer () {
      this.show = false

      setTimeout(() => {
        this.initFormData()
      }, 200)
    },
    // 触发表单保存按钮
    actionClick () {
      if (this.loading) {
        return
      }

      this.$refs.JformData.validate((val) => {
        if (val) {
          const data = JSON.parse(JSON.stringify(this.formData))

          if (this.isEdit) {
            delete data.create_time
            delete data.update_time
            delete data.flag
          }

          this.saveData(data)
        }
      })
    },
    // 提交表单
    async saveData (data) {
      this.loading = true

      const url = `/manage/userinfo/${this.type}`

      const res = await this.SUBMIT_FORM({
        listUrl: url,
        data
      })

      this.loading = false

      if (res) {
        this.$emit('refreshTable')
        this.GET_ALL_TEACHER(true)
        this.hideDrawer()
      }
    },
    ...mapActions({
      'GET_ALL_TEACHER': 'GET_ALL_TEACHER',
      'SUBMIT_FORM': 'SUBMIT_FORM'
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
